<template>
	<view>

		<view class="item" style="flex-direction: column;align-items: flex-end;" v-if="dataBean.approveStatusStr">
			<text
				style="color: #FFC000;font-size: 30rpx;margin: 20rpx 20rpx 10rpx 0;">{{dataBean.approveStatusStr|filterNull}}</text>
			<text v-if="dataBean.approveStatusRemark"
				style="color: #FF623D;font-size: 26rpx;margin: 0 20rpx 10rpx 0;">{{dataBean.approveStatusRemark|filterNull}}</text>
		</view>

		<remind-carinfo :dataBean="dataBean"></remind-carinfo>

		<view class="item">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="处置信息" label-color="#333333"
					:customStyle="{'line-height': '80rpx',}">
				</u-icon>

				<!-- <text style="line-height: 80rpx; color: #E93131;">{{dataBean.carDisposal.repairStatusShow|filterNull}}</text> -->
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view v-if="dataBean.carDisposal != null">
				<view class="text-line">
					<text class="text-name">处置原因:</text>
					<text class="text-value">{{dataBean.carDisposal.disposalReason|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">处置时间:</text>
					<text class="text-value">{{dataBean.carDisposal.disposalTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{dataBean.carDisposal.remark|filterNull}}</text>
				</view>

				<picPdf :attachment="dataBean.carDisposal.attachment"></picPdf>

			</view>

			<no-data v-else content="暂无处置~"></no-data>

		</view>

		<examflow :from="pageType" :instanceId="instanceId" approvalName="carDisposalApprove" :isAdd="false"></examflow>


		<view style="height: 100rpx;"></view>

		<view class="button-container" v-if="'myexam'==pageType||dataBean.disposalButton||dataBean.undoButton">
			<button class="btn-item" @click="bottomClick(1)"
				v-if="dataBean.disposalButton||dataBean.undoButton">{{dataBean.disposalButton?'新增处置':dataBean.undoButton?'撤销处置':''}}</button>
			<button class="btn-item" @click="bottomClick(2)" v-if="'myexam'==pageType">审核驳回</button>
			<button class="btn-item" @click="bottomClick(3)" v-if="'myexam'==pageType">审核通过</button>
		</view>

		<u-modal title="撤销处置" :show="showDisposal" @confirm="disposalConfirm" showCancelButton
			@cancel="showDisposal=false">
			<view style="padding: 0;margin: 0;display: flex;align-items: center;width: 100%;" @click="pickerShow">

				<text style="font-size: 28rpx;color: #E93131;">*</text>
				<text style="font-size: 28rpx;color: #333;flex: 1;">撤回仓库</text>

				<u--input v-model="warehouseName" disabled disabledColor="#ffffff" border="none" inputAlign="right"
					placeholder="请选择仓库">
				</u--input>

				<u-icon slot="right" name="arrow-right"></u-icon>

			</view>

		</u-modal>

		<!-- 交强险保险公司 -->
		<u-picker :show="showWarehouse" :columns="warehouseList" keyName="warehouseName" @confirm="pickerConfim"
			@cancel="showWarehouse=false"></u-picker>

	</view>
</template>

<script>
	import remindCarinfo from '@/components/remind-carinfo.vue';
	import examflow from '@/components/exam-flow.vue';
	import picPdf from '@/components/pic-pdf.vue';
	import {
		disposal_handle
	} from '@/common/http.api.js';

	export default {
		components: {
			remindCarinfo,
			examflow,
			picPdf
		},

		data() {
			return {
				dataBean: {
					carDisposal: {
						attachment: []
					},
					vehicle: {

					},
					disposalButton: false,
					undoButton: false,

				},
				carId: '',
				examList: [],
				pageType: '',
				instanceId: '',
				approveId: '',
				showDisposal: false,
				showWarehouse: false,
				warehouseId: '',
				warehouseName: '',
				warehouseList: []
			}
		},
		methods: {

			bottomClick(type) {

				switch (type) {
					case 1: //处置车辆

						if (this.dataBean.undoButton) {
							this.showDisposal = true
						}

						if (this.dataBean.disposalButton) {
							getApp().globalData.vehicle = this.dataBean.vehicle;

							uni.navigateTo({
								url: '/pagesA/disposal/add-disposal?pageType=add&carId=' + this.carId
							})
						}

						break;
					case 2: //审核驳回
						uni.redirectTo({
							url: '/pagesA/exam/exam-flow?type=3&processKey=carDisposalApprove&approveId=' + this
								.approveId + '&url=' + disposal_handle
						})
						break;
					case 3: //审核通过
						uni.redirectTo({
							url: '/pagesA/exam/exam-flow?type=4&processKey=carDisposalApprove&approveId=' + this
								.approveId + '&url=' + disposal_handle
						})
						break;
				}

			},

			pickerShow() {
				console.log('点击了显示');
				this.showWarehouse = true;
			},

			pickerConfim(e) {
				this.showWarehouse = false;
				this.warehouseName = e.value[0].warehouseName;
				this.warehouseId = e.value[0].warehouseId;
			},

			disposalConfirm() {
				if (uni.$u.test.isEmpty(this.warehouseId)) {
					this.$u.toast('请选择撤回仓库')
					return
				}

				this.$u.api.carDisposalUndo({
					componentId: this.dataBean.carDisposal.id,
					warehouseId: this.warehouseId
				}).then(res => {
					this.showDisposal = false;
					this.$u.toast('提交成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			}


		},

		onShow() {

			this.$u.api.carDisposalDetail({
				carId: this.carId,
			}).then(
				res => {
					this.dataBean = res;

					//做假数据测试
					// this.dataBean.disposalButton = true;
					// this.dataBean.carDisposal.attachment = [
					// 	{
					// 		url:'ERBA/idCard_images/3c/9b/b0ac4a9bff3546beb65e3d7413123c9b.jpg',
					// 		typeFile:'1',
					// 		nameFile:'测试1'
					// 	},
					// 	{
					// 		url:'ERBA/license_images/62/fd/cc96cafd29d74aeb920240c1bf9062fd.jpg',
					// 		typeFile:'1',
					// 		nameFile:'测试2'
					// 	},
					// 	{
					// 		url:'http://139.9.242.179/image-server/uni_longrent/test.pdf',
					// 		typeFile:'0',
					// 		nameFile:'测试3'
					// 	},
					// 	{
					// 		url:'http://139.9.242.179/image-server/uni_longrent/test.pdf',
					// 		typeFile:'0',
					// 		nameFile:'测试4'
					// 	},
					// ]
				}

			);

			this.$u.api.warehouseList({
				token: this.$store.state.user.userInfo.token,
				type: 2
			}).then(res => {
				this.warehouseList = [res];
			})
		},
		onLoad(op) {
			this.carId = op.carId;
			this.pageType = op.pageType;
			this.instanceId = op.instanceId;
			this.approveId = op.approveId;
		}
	}
</script>

<style lang="scss" scoped>
	// .button-container {
	// 	display: flex;
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100rpx;
	// 	bottom: 0;
	// 	z-index: 999;
	// 	background-color: white;
	// 	padding: 0 20rpx 0 0;
	// 	box-sizing: border-box;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;

	// 	button {
	// 		flex: 1;
	// 		margin-left: 20rpx;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		border-radius: 40rpx;
	// 		color: $xz-bgColor-write;
	// 		background-color: $xz-bgColor-blue;
	// 		font-size: 32rpx;
	// 	}

	// }
</style>
